/*
 * @Description: 手风琴面板内容组件部分
 * @Author: baimenghan
 * @Email: baimenghan@nnuo.com
 * @Date: 2022-02-25 12:27:06
 * @LastEditors: baimenghan
 * @LastEditTime: 2022-02-28 18:44:23
 * @FilePath: \daka\src\components\PanelContent\PanelContent.jsx
 */

import React from "react";
import "./PanelContent.sass";
import { SettingOutlined } from "@ant-design/icons";
import { List, Skeleton, Button } from "antd";
import { updateConfigApi } from "@/api/configApi";
import emitter from "@/services/event";
import {
  chineseTransform,
  transformMillionSecondToSecond,
} from "@/utils/common";

class PanelContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initLoading: true,
      loading: false,
      config: this.props.config,
      configName: this.props.config.configName,
      configValue: this.props.config.configValue,
      action: "inline-block",
    };
    this.isShow = false;
  }
  componentDidMount() {
    const configValue = JSON.parse(this.state.configValue);
    let list = [];
    if (configValue instanceof Array) {
      list = configValue;
    } else {
      list.push(configValue);
    }
    this.setState({
      list,
      initLoading: false,
    });
    console.log(list, "list");
    // 自动刷新数据，页面展示最新数据
    emitter.addListener("refresh", (list) => {
      console.log("refresh", list);
      this.setState({ list });
    });
  }

  // 编辑
  editItem = (isShow) => {
    const { configName, configValue } = this.state;
    // 当 configName 为 dakaIntervals 和 goalConfig 时，配置弹框为数字输入框
    if (configName === "dakaIntervals" || configName === "goalConfig") {
      emitter.emit("openDialog", isShow, configName, configValue, false);
    } else {
      emitter.emit("openDialog", isShow, configName, configValue, true);
    }
  };

  // 关闭弹窗
  closeDialog = () => {
    this.isShow = !this.isShow;
  };

  // 删除
  deleteItem = (index) => {
    // splice() 方法向/从数组添加/删除项目，并返回删除的项目
    this.state.list.splice(index, 1);
    this.setState({
      loading: true,
      list: this.state.list,
    });
    updateConfigApi({
      configName: this.state.configName,
      configValue: JSON.stringify(this.state.list),
    });
  };

  render() {
    const { initLoading, list, action } = this.state;
    return (
      <List
        className="load-more-list"
        loading={initLoading}
        itemLayout="horizontal"
        dataSource={list instanceof Array ? list : []}
        renderItem={(item, index) => {
          return (
            <List.Item
              actions={[
                <Button
                  key="load-more-edit"
                  type="primary"
                  style={{ display: { action } }}
                  onClick={this.editItem.bind(this, !this.isShow)}
                >
                  编辑
                </Button>,
                <Button
                  className="btn-margin"
                  type="danger"
                  key="load-more-edit"
                  onClick={this.deleteItem.bind(this, index)}
                >
                  删除
                </Button>,
              ]}
            >
              <Skeleton
                avatar
                title={false}
                loading={item ? false : true}
                active
              >
                <List.Item.Meta
                  avatar={<SettingOutlined />}
                  title={
                    <div className="config-name">
                      {chineseTransform(this.state.configName)}
                    </div>
                  }
                  description={
                    <div className="config-value">
                      {typeof item === "number"
                        ? transformMillionSecondToSecond(item)
                        : item}
                    </div>
                  }
                />
              </Skeleton>
            </List.Item>
          );
        }}
      ></List>
    );
  }
}

export default PanelContent;
